define([ 'jquery',
    'underscore',
  'backbone',
  'require.dust!./intro-template',
  './pubsub'
], function( $, _, Backbone, template, pubsub ) {
  'use strict';

  var view = Backbone.View.extend({

//    el : '#hra-programs-tabs-0',

    initialize : function() {
       var self = this,
           introdata = self.model.toJSON()['content'];

      self.$el = $( '#hra-programs-tabs-' + self.model.get( 'index' ));

      template( introdata, function( err, out ){
        self.$el.html( out );
      });


    },

    render : function() {
      var self = this;
      //load current widget page for each program or deffered until the tab is actived

    },

    events : {
      'click .hra-programs-intro-start' : function( event ){
        pubsub.trigger( 'nextStep', { index : this.model.get( 'index'), from : 'intro'  });
      }

    },


    remove: function() {
      this.$el.hide();
    }
//    _loadWidget : function( index, program ) {
//      var currentIndex = program[ 'currentIndex' ],
//          widget = program[ 'widgets' ][ currentIndex ],
//          widgetType =  widget[ 'type' ],
//          widgetContent =  widget[ 'content' ],
//          $widgetDiv = this.$el.find('#hra-programs-tabs-' + index),
//          self = this;
//
//      switch( widgetType ) {
//        case 'i' :
//          self._loadIntro( $widgetDiv, widgetContent );
//          break;
//        default:
//          console.log('switch default');
//
//      }
//    },
//    _loadIntro : function( $div, content ) {
//      var html = '<h2>' + content['subtitle'] + '</h2>' +
//                  '<div class="hra-programs-intro-points">' + content['points'] + ' POINTS</div>' +
//                  '<img href = "' + content['image'] + '"/>'  +
//                  '<div class="hra-programs-intro-start">' + content['start'] + '</div>';
//      $div.append(html);
//
//    }

  });

  return view;

});




